<template>
	<view class="container">
		<!-- 支付成功弹窗 -->
		<view class="success-modal" v-if="showSuccessModal">
			<view class="modal-content">
				<view class="success-icon"><img src="@/static/success.png" alt=""></view>
				<text class="success-text">支付成功</text>
				<text class="success-price">¥ {{successAmount}}</text>
				<button class="success-button" @click="closeSuccessModal">完成</button>
			</view>
		</view>
		<!-- 活动横幅 -->
		<view class="banner">
			<view class="carriers">
				<image src="@/static/yd.png" class="carrier-icon"></image>
				<image src="@/static/lt.png" class="carrier-icon"></image>
				<image src="@/static/dx.png" class="carrier-icon"></image>
			</view>
			<image src="@/static/bg1.png" class="banner-bg"></image>
			<image src="@/static/qianjing.png" class="banner-bg3"></image>

			<image src="@/static/bg2.png" class="banner-bg2"></image>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 手机号输入 -->
			<view class="form-item">
				<text class="form-label">账号</text>
				<input type="number" placeholder="请输入手机号" v-model="phoneNumber" class="form-input" />
			</view>

			<!-- 支付方式 -->
			<view class="form-item">
				<text class="form-label">支付方式</text>
				<view class="payment-method">
					<view class="payment-option">
						<image src="@/static/zfb.png" class="payment-icon"></image>
						<text class="payment-text">在线支付</text>
					</view>
				</view>
			</view>

			<!-- 价格信息 -->
			<view class="price-info">
				<view class="price-item">
					<text class="price-label">实际支付金额：</text>
					<view style="display: flex;align-items: center;">
						<text class="original-price">{{beforeAmount}}元</text>
						<text class="discounted-price">{{amount}}元</text>
					</view>

				</view>
				<view class="price-item">
					<text class="price-label">实际到账总话费：</text>
					<text class="final-price">{{beforeAmount}}元</text>
				</view>
			</view>

			<!-- 按钮区域 -->
			<view class="button-group">
				<button class="pay-btn" @click="submitPayment">立即支付</button>
				<button class="query-btn" @click="queryBalance">查询</button>
			</view>
		</view>

		<!-- 优惠券列表 -->
		<view class="coupon-list-container" v-if="coupons.length > 0">
			<!-- 补贴标题 -->
			<view class="subsidy-header">
				<image src="@/static/bg3.png" class="subsidy-icon"></image>
				<text class="subsidy-title">大额补贴 绝对超值</text>
			</view>

			<!-- 优惠券列表 -->
			<view class="coupon-list">
				<!-- 优惠券项 -->
				<view class="coupon-item" v-for="(coupon, index) in coupons" :key="index"
					:class="{ 'use' : coupon.claimStatus == 0}">
					<view class="coupon-left">
						<view class="coupon-amount">{{coupon.amount}}元</view>
						<view class="coupon-unit" style="flex: 1;margin-right: 40rpx">
							<view class="coupon-name">{{coupon.amount}}元话费券</view>
							<view class="coupon-desc" v-if="coupon.claimStatus == 0">支付后领取12小时内到账</view>
							<view class="coupon-desc" v-if="coupon.claimStatus == 1">每月可手动领取</view>
							<view class="coupon-desc" v-if="coupon.claimStatus == 2">每月自行领取超划算</view>
							<view class="coupon-desc" v-if="coupon.claimStatus == 3">每月可手动领取</view>
						</view>

					</view>
					<view class="coupon-right">
						<view v-if="coupon.claimStatus == 0" class="coupon-btn" @click="claimCoupon(coupon)">立即领取</view>
						<view v-if="coupon.claimStatus == 1" class="coupon-btn">待领取</view>
						<view v-if="coupon.claimStatus == 2" class="coupon-btn">已领取</view>
						<view v-if="coupon.claimStatus == 3" class="coupon-btn">已失效</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 活动说明 -->
		<view class="coupon-list-container">
			<view class="subsidy-header">
				<image src="@/static/bg3.png" class="subsidy-icon"></image>
				<text class="subsidy-title">权益礼包说明</text>
			</view>
			<view class="description-content">
				<view class="description-item">
					<text class="item-number">1、</text>
					<text class="item-text">费用说明:一次办理，有效期为10个月，激活会员后，我们将不会再收取任何费用。</text>
				</view>
				<view class="description-item">
					<text class="item-number">2.</text>
					<text class="item-text">活动说明:</text>
				</view>
				<view class="description-item">
					<text class="item-number">2.1</text>
					<text
						class="item-text">支付50元参与话费月领活动，可获得100元电话费，支付成功后在跳转的网页领取话费，每月可以手动领取10元话费，当月不领则当月话费逾期，权益作废。领取话费地址https://www.1001010.online。</text>
				</view>
				<view class="description-item">
					<text class="item-number">2.2</text>
					<text class="item-text">充值失败会自动退款，活动真实有效，如不参与或者觉得活动不适合自己的可以点击页面下方【客服售后】申请退款，有任何问题都可点击右下方输入框发送消息，客服会尽快回复您的问题。</text>
				</view>
				<view class="description-item">
					<text class="item-number">2.3</text>
					<text class="item-text">系统维护时间22:00－9:00，请在其它时间段进行充值。</text>
				</view>
				<view class="description-item">
					<text class="item-number">3.</text>
					<text class="item-text">领取方法：点击链接 <a href="https://www.1001010.online"
							target="_blank">https://www.1001010.online</a>，即可参与活动，话费领取时间段以首次充值计算，比如4号充值，当月可以领取第一次，次月4号开始可以领取第二次，以此类推。</text>
				</view>
				<view class="description-item">
					<text class="item-number">4.</text>
					<text class="item-text">我们为您精心挑选的话费资充值福利，只为帮您以最低的成本享受更高的资费使用权益，已购买并领取权益的用户订单不支持退货退款，请确认后再下单。</text>
				</view>
				<view class="description-item">
					<text class="item-number">5.</text>
					<text class="item-text">如有疑问请点击下方客服窗口咨询。</text>
				</view>
			</view>
		</view>
		<div class="tips">
			<view class="tips-item">
				<text class="tips-text">网站备案/许可证号 : 粤ICP备2024269148号</text>
			</view>
			<view class="tips-item">
			</view>
			<view class="tips-item">
				<text class="tips-text">活动由主办</text>
			</view>
		</div>
		
		<!-- 客服悬浮按钮 -->
		<!-- <view class="customer-service" @click="openCustomerService">
			<text class="service-text">客服</text>
		</view> -->
	</view>
</template>
<script>
	import request from '@/api/request.js';
(function(y, un, q, u, e) { window[un] = window[un] || function(y) { window[un].company_id = window[un].company_id || y; (window[un].isOpenNewWindow = true);(window[un].sid = '4315583189612495'); }; u = document.createElement("script"); u.src = q + "?v=" + new Date().getUTCDate(); u.async = true; e = document.getElementsByTagName("script")[0]; e.parentNode.insertBefore(u, e); })(window,"_YUNQUE","//dist.yunque360.com/bundle.js"); _YUNQUE("cko1lcnn6b7iu1");	export default {
		data() {
			return {
				phoneNumber: '',
				selectedPaymentMethod: 'online',
				showSuccessModal: false,
				successAmount: '',
				coupons: [],
				amount: '',
				beforeAmount: ''
			}
		},
		mounted() {
			request.get('/mp/tMember/getPagePay').then(res => {
				this.amount = res.data.amount
				this.beforeAmount = res.data.beforeAmount
			})

		},
		onLoad(options) {
			// 由于参数在hash中，onLoad的options是空的
			this.parseHashParams();
		},
		methods: {
			parseHashParams() {
				// 获取当前页面实例
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];

				// 获取完整URL（包含hash）
				const fullPath = currentPage.$page ? currentPage.$page.fullPath : '';
				if (fullPath) {
					// 提取hash部分（#后面的所有内容）
					const hashIndex = fullPath.indexOf('/');
					console.log('hasIndex',hashIndex)
					if (hashIndex !== -1) {
						const hashPart = fullPath.substring(hashIndex + 1);

						// 解析hash中的参数
						const params = this.parseUrlParams(hashPart);

						// 处理支付结果
						this.handlePayResult(params);
					}
				}
			},
			parseUrlParams(url) {
				const params = {};

				// 分离路径和参数
				const parts = url.split('?');
				if (parts.length > 1) {
					const searchParams = parts[1];
					const paramPairs = searchParams.split('&');

					for (const pair of paramPairs) {
						const [key, value] = pair.split('=');
						if (key && value) {
							try {
								// URL解码
								params[key] = decodeURIComponent(value);
							} catch (e) {
								params[key] = value;
							}
						}
					}
				}

				return params;
			},
			handlePayResult(params) {

				// 获取具体参数
				const outTradeNo = params.out_trade_no; // 商户订单号
				const tradeNo = params.trade_no; // 支付宝交易号
				const totalAmount = params.total_amount; // 支付金额
				const timestamp = params.timestamp; // 支付时间
				const sign = params.sign; // 签名
				// 调用接口获取表单内容
				request.get('/mp/tMember/result', {
					trandNo: outTradeNo
				}).then(res =>{
					console.log('res',res)
					if(res.data.alipay_trade_query_response.code === '10000'){
						this.successAmount = res.data.alipay_trade_query_response.total_amount
						this.showSuccessModal = true
					}
				})
				// 这里可以继续处理支付结果逻辑
				// this.verifyAndUpdateOrder(params);
			},
			getList() {
				request.post('/mp/tMember/getPageList', {
					current: 1,
					size: 10,
					phone: this.phoneNumber
				}).then(res => {
					this.coupons = res.data.records
					if (this.coupons.length == 0) {
						uni.showToast({
							title: '暂无话费领取',
							icon: 'error'
						})
					}
				})
			},
			// 提交支付
			submitPayment() {
				if (!this.phoneNumber || this.phoneNumber.length !== 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}

				// 调用接口获取表单内容
				request.get('/mp/tMember/getPay', {
					phone: this.phoneNumber
				}).then(res => {
					console.log('成功返回',res)
					if(res.code == -10){
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
					// 创建一个临时容器来放置接口返回的HTML内容
					const tempDiv = document.createElement('div');
					tempDiv.innerHTML = res;

					// 获取表单元素
					const form = tempDiv.querySelector('form');
					if (form) {
						// 添加表单到文档并自动提交
						document.body.appendChild(form);
						form.submit();

						// 提交后移除表单
						setTimeout(() => {
							if (form.parentNode === document.body) {
								document.body.removeChild(form);
							}
						}, 0);
					}
				}).catch(error => {
					uni.showToast({
						title: '获取支付表单失败，请重试',
						icon: 'none'
					});
					console.error('支付表单获取失败:', error);
				});
			},

			// 关闭支付成功弹窗
			closeSuccessModal() {
				this.showSuccessModal = false;
			},

			// 查询余额
			queryBalance() {
				console.log(this.phoneNumber.length)
				if (this.phoneNumber == '' || this.phoneNumber.length !== 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}

				this.getList()
			},

			// 领取优惠券
			claimCoupon(row) {
				// 检查是否已输入手机号
				if (this.phoneNumber == '' || this.phoneNumber.length != 11) {
					uni.showToast({
						title: '请先输入正确的手机号',
						icon: 'none'
					});
					return;
				}

				if (row.claimStatus == 0) {
					request.post('/mp/tMember/claim', {
						claimId: row.id,
						phone: this.phoneNumber
					}).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '话费券领取成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: res.data,
								icon: 'none'
							});
						}
					})
				}
			},
			
			// 打开客服链接
			openCustomerService() {
				// 使用系统方法打开客服链接
				window.open('https://uclient.yunque360.com/frame.html?company_id=cko1lcnn6b7iu1&sid=4315583189612495', '_blank');
			}
		},

		// 组件销毁时清除定时器
		destroyed() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		}
	}
</script>

<style>
	.payment-option {
		padding: 20rpx;
		border: 1px solid #ddd;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
	}

	.payment-icon {
		width: 48rpx;
		height: 48rpx;
		margin-right: 20rpx;
	}

	.tips {
		color: #BF7100;
		text-align: center;
		margin-bottom: 30px;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		background: linear-gradient(180deg, #FAE0B9 0%, #FEC7A2 100%);
	}

	.coupon-bg {
		width: 624rpx;
		height: 160rpx;
		object-fit: contain;
	}

	/* 运营商标志 */
	.carriers {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 20px;
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
	}

	.carrier-icon {
		width: 144rpx;
		height: 48rpx;
	}

	/* 活动横幅 */
	.banner {
		position: relative;
		width: 100%;
	}

	.banner-bg {
		width: 100%;
		height: 708rpx;
	}
	.banner-bg3 {
		width: 110%;
		height: 660rpx;
		position: absolute;
		left: -5%;
		top: 100rpx;
		animation: pulse 2s infinite;
	}
	.banner-bg2 {
		width: 100%;
		height: 1212rpx;
		position: absolute;
		bottom: -1000rpx;
		left: 0;
		z-index: 2;
	}

	.banner-title {
		font-size: 20px;
		font-weight: bold;
		color: #EB4B6D;
	}

	.banner-subtitle {
		font-size: 14px;
		color: #EB4B6D;
	}


	/* 表单区域 */
	.form-container {
		width: 90%;
		box-sizing: border-box;
		background-color: white;
		border-radius: 15px;
		padding: 20px;
		position: relative;
		z-index: 3;
	}

	.form-item {
		margin-bottom: 20px;
	}

	.form-label {
		display: block;
		font-size: 16px;
		margin-bottom: 10px;
		color: #333;
	}

	.form-input {
		width: 100%;
		height: 45px;
		border: 1px solid #ddd;
		border-radius: 8px;
		padding: 0 15px;
		font-size: 16px;
		box-sizing: border-box;
	}

	.verification-code {
		position: relative;
	}

	.code-input {
		height: 45px;
		border: 1px solid #ddd;
		border-radius: 8px;
		padding: 0 15px;
		font-size: 16px;
		margin-right: 10px;
	}

	.get-code-btn {
		height: 90rpx;
		line-height: 90rpx;
		color: #0569FF;
		border: none;
		border-radius: 8px;
		padding: 0 20px;
		font-size: 14px;
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		background: none;
		border: none;
		border-left: 1px solid #0569FF;
		border: none;
		outline: none;
	}

	.get-code-btn:disabled {
		background-color: #ccc;
	}

	/* 价格信息 */
	.price-info {
		margin-bottom: 20px;
	}

	.price-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.price-label {
		font-size: 16px;
		color: #333;
	}

	.original-price {
		font-size: 14px;
		color: #999;
		text-decoration: line-through;
	}

	.discounted-price {
		font-size: 18px;
		font-weight: bold;
		color: #EB4B6D;
		margin-left: 10px;
	}

	.final-price {
		font-size: 18px;
		font-weight: bold;
		color: #EB4B6D;
	}

	/* 按钮区域 */
	.button-group {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pay-btn {
		width: 100%;
		height: 50px;
		background-color: #EB4B6D;
		color: white;
		border: none;
		border-radius: 25px;
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 15px;
		animation: pulse 2s infinite;
	}

	/* 定义循环缩小放大的动画 */
	@keyframes pulse {
		0% {
			transform: scale(1);
		}
		50% {
			transform: scale(0.95);
		}
		100% {
			transform: scale(1);
		}
	}

	.query-btn {
		width: 100%;
		height: 50px;
		background-color: #fff;
		color: #EB4B6D;
		border: 1px solid #EB4B6D;
		border-radius: 25px;
		font-size: 18px;
	}

	/* 优惠券列表 */
	.coupon-list-container {
		width: 90%;
		margin-top: 20px;
		margin-bottom: 40px;
		background-color: white;
		border-radius: 15px;
		padding: 20px 0;
		text-align: center;
		box-sizing: border-box;
		position: relative;
		z-index: 3;
	}

	/* 补贴标题 */
	.subsidy-header {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20px;
	}

	.subsidy-icon {
		width: 424rpx;
		height: 80rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -59rpx;
	}

	.subsidy-title {
		color: #EB4B6D;
		font-size: 16px;
		font-weight: bold;
		border-radius: 20px;
		position: absolute;
		width: 100%;
		text-align: center;
		top: -40rpx;
		box-sizing: border-box;
	}

	/* 优惠券列表 */
	.coupon-list {
		border-radius: 10px;
		overflow: hidden;
	}

	/* 优惠券项 */
	.coupon-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 15rpx;
		padding: 40rpx 30rpx;
		padding-right: 10rpx;
		border-bottom: 1px solid #f0f0f0;
		background: url('@/static/notake.png') no-repeat center center;
		background-size: contain;
	}

	.coupon-item.use {
		background: url('@/static/take.png') no-repeat center center;
		background-size: contain;
	}




	/* 优惠券左侧信息 */
	.coupon-left {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.coupon-amount {
		display: block;
		font-size: 24px;
		font-weight: bold;
		color: #777E90;
		margin-right: 20rpx;
	}

	.coupon-item.use .coupon-amount {
		color: #EB4B6D;
	}

	.coupon-item.use .coupon-desc {
		color: #EB4B6D;
	}

	.coupon-item.use .coupon-name {
		color: #EB4B6D;
	}

	.coupon-name {
		display: block;
		font-size: 14px;
		color: #333;
		margin-bottom: 5px;
	}

	.coupon-desc {
		display: block;
		font-size: 12px;
		color: #999;
	}

	/* 优惠券右侧状态或按钮 */
	.coupon-right {
		display: flex;
		align-items: center;
	}

	.coupon-btn {
		background-color: #EAEAEA;
		color: white;
		padding: 8px 20px;
		border-radius: 20px;
		font-size: 14px;
		font-weight: bold;
		color: #777E90;
	}

	.use .coupon-btn {
		background-color: #EB4B6D;
		color: #fff;
	}

	.coupon-status {
		font-size: 14px;
		color: #999;
		background: #EAEAEA;
	}

	/* 不同状态的优惠券样式 */
	.coupon-item.available .coupon-amount,
	.coupon-item.available .coupon-name {
		color: #EB4B6D;
	}

	.coupon-item.claimed .coupon-amount,
	.coupon-item.claimed .coupon-name,
	.coupon-item.claimed .coupon-desc,
	.coupon-item.expired .coupon-amount,
	.coupon-item.expired .coupon-name,
	.coupon-item.expired .coupon-desc {
		color: #ccc;
	}

	.coupon-item.expired .coupon-status {
		color: #ff4444;
	}

	.coupon-item.pending .coupon-status {
		color: #ff9900;
	}



	/* 说明标题 */
	.description-title {
		background-color: #EB4B6D;
		color: white;
		font-size: 16px;
		font-weight: bold;
		padding: 8px 30px;
		border-radius: 20px;
		text-align: center;
		margin-bottom: 20px;
	}

	/* 说明内容 */
	.description-content {
		line-height: 1.8;
		padding: 0 20rpx;
	}

	/* 说明项 */
	.description-item {
		display: flex;
		margin-bottom: 15px;
	}

	.description-item:last-child {
		margin-bottom: 0;
	}

	/* 序号 */
	.item-number {
		font-weight: bold;
		color: #333;
		margin-right: 5px;
		flex-shrink: 0;
	}

	/* 文本内容 */
	.item-text {
		flex: 1;
		text-align: left;
		font-size: 14px;
		color: #333;
		line-height: 1.6;
	}

	.item-text a {
		color: #333;
	}

	/* 支付成功弹窗样式 */
	.success-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.modal-content {
		background-color: white;
		width: 80%;
		border-radius: 20rpx;
		padding: 60rpx 40rpx;
		text-align: center;
		position: relative;
		padding-top: 170rpx;
	}

	.success-icon {
		margin-bottom: 30rpx;
		position: absolute;
		left: 50%;
		top: -100rpx;
		transform: translateX(-50%);
	}

	.success-icon img {
		width: 174rpx;
		height: 210rpx;
	}

	.success-text {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 80rpx;
	}

	.success-price {
		display: block;
		font-size: 56rpx;
		font-weight: bold;
		color: #EB4B6D;
		margin-bottom: 60rpx;
	}

	.success-button {
		width: 100%;
		height: 90rpx;
		background-color: #EB4B6D;
		color: white;
		border: none;
		border-radius: 45rpx;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	/* 客服悬浮按钮样式 */
	.customer-service {
		position: fixed;
		top: 200rpx;
		right: 0;
		padding: 20rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 8px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 28rpx;
		font-weight: bold;
		box-shadow: 0 4rpx 12rpx rgba(235, 75, 109, 0.3);
		z-index: 10;
		width: 20px;
	}
	
	.service-text {
		text-align: center;
	}
</style>